<template>
  <div class="list-wrap">
    <a-form class="search-form" :form="form">
      <a-row :gutter="gutter">
        <a-col :lg="7" :xl="6" :xxl="5">
          <a-form-item label="充值类型">
            <a-input-group class="query-item" compact>
              <a-select style="width: 100%" v-model="type">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">余额充值</a-select-option>
                <a-select-option value="2">保证金充值</a-select-option>
                <a-select-option value="3">加盟费</a-select-option>
                <!-- 充值类型 0 全部 1:余额充值;2:保证金充值 3:加盟费 -->
              </a-select>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :xl="6" :xxl="5">
          <a-form-item label="支付方式">
            <a-input-group class="query-item" compact>
              <a-select style="width: 100%" v-model="payWay">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">手动</a-select-option>
                <a-select-option value="2">微信</a-select-option>
                <a-select-option value="3">支付宝</a-select-option>
                <!-- 0 全部 1 手动 2 微信 3 支付宝 -->
              </a-select>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="11" :xl="12" :xxl="7">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 40%" v-model="defaultSearch">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">服务商编号</a-select-option>
                <a-select-option value="2">服务商姓名</a-select-option>
                <a-select-option value="3">服务商手机号</a-select-option>
                <!-- 0 全部 1 编号 2 姓名 3 手机号 -->
              </a-select>
              <a-input style="width: 60%" placeholder="请输入查询条件" v-model="keyword"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="10" :xxl="7">
          <a-form-item label="发起时间">
            <a-range-picker
              :placeholder="['开始时间', '结束时间']"
              @change="getCreateTime"
              v-model="createTime"
              class="select-range-time"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="10" :xl="8" :xxl="6">
          <div class="top-btns">
            <a-button @click="searchList" type="primary">查询</a-button>
            <a-button @click="resetList">重置</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table
        :columns="columns"
        :dataSource="rechargeData"
        rowKey="id"
        :loading="loading"
        :pagination="pagination"
        :scroll="{ x: 1500, y: 300 }"
      >
      </a-table>
      <pagination
        :total="total"
        @loadDataList="initPageList"
        ref="pageBand"
      />
    </div>
  </div>
</template>
<script>
import { ptrecharge } from '../../store/providerApi.js'
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 48
      },
      columns: [
        {
          dataIndex: 'index',
          title: '序号',
          fixed: 'left',
          width: 60
        },
        {
          title: '服务商编号',
          dataIndex: 'partner_no'
        },
        {
          title: '服务商姓名',
          dataIndex: 'partner_name'
        },
        {
          title: '服务商手机号',
          dataIndex: 'phone'
        },
        {
          title: '流水号',
          dataIndex: 'order_no'
        },
        {
          title: '充值金额(元)',
          dataIndex: 'amount'
        },
        {
          title: '支付方式',
          dataIndex: 'pay_way',
          customRender(pay_way) {
            if (pay_way == 1) {
              return '手动'
            } else if (pay_way == 2) {
              return '微信'
            } else if (pay_way == 3) {
              return '支付宝'
            }
          }
        },
        {
          title: '充值类型',
          dataIndex: 'type',
          customRender(type) {
            if (type == 1) {
              return '余额充值'
            } else if (type == 2) {
              return '保证金充值'
            } else if (type == 3) {
              return '加盟费'
            }
          }
        },
        {
          title: '支付单号',
          dataIndex: 'trade_no'
        },
        {
          title: '充值状态',
          dataIndex: 'pay_status',
          customRender(pay_status) {
            if (pay_status == 0) {
              return '未支付'
            } else if (pay_status == 1) {
              return '成功'
            } else if (pay_status == 2) {
              return '失败'
            }
          }
        },
        {
          title: '缴纳时间',
          dataIndex: 'created_at'
        }
      ],
      rechargeData: [],
      start_time: 0,
      end_time: 0,
      loading: false,
      pagination: false, //表格自带的
      total: 0,
      createTime: [],
      type: '0',
      defaultSearch: '0',
      keyword: '',
      payWay: '0'
    }
  },
  methods: {
    searchList() {
      this.$refs.pageBand.getData()
    },
    resetList() {
      this.payWay = '0'
      this.type = '0'
      this.createTime = []
      this.start_time = 0
      this.end_time = 0
      this.defaultSearch = '0'
      this.keyword = ''
      this.$refs.pageBand.getData()
    },
    initPageList(info) {
      // debugger
      this.loading = true
      console.log(info)
      ptrecharge({
        type: this.type, // 充值类型 0 全部 1:余额充值;2:保证金充值 3:加盟费
        payWay: this.payWay, // 0 全部 1 手动 2 微信 3 支付宝
        searchType: this.defaultSearch, // 0 全部 1 编号 2 姓名 3 手机号
        startTime: this.start_time,
        endTime: this.end_time,
        name: this.keyword,
        page: info.page,
        num: info.pageSize
      }).then(res => {
        var array = res.data.list
        for (let i = 0; i < array.length; i++) {
          array[i]['index'] = (info.page - 1) * info.pageSize + (i + 1)
        }
        this.loading = false
        this.rechargeData = array
        this.total = res.data.total_num
      })
    },
    getCreateTime(date, str) {
      if (str[0] && str[1]) {
        this.start_time = new Date(str[0] + ' 00:00:00').getTime() / 1000
        this.end_time = new Date(str[1] + ' 23:59:59').getTime() / 1000
      } else {
        this.start_time = 0
        this.end_time = 0
      }
    }
  }
}
</script>
<style>
.selected-item {
  display: inline-block;
  margin-top: 20px;
}
</style>
